<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 外边距 自适应居中 */
				margin: 200px auto;
				position: relative;
				transform: rotate(135deg);
				/* 透明度：属性值范围值0~1 */
				opacity:.7 ;
				/* 滤镜属性：下阴影  产生光晕效果 
				                  drop-shadow（X轴Y轴 模糊范围）*/
				filter: drop-shadow(0 0 100px#e4393c);
				/* 动画 复合属性 2.启动动画 */
				animation:heart.8s linear infinite;
				/*        关键帧名称 过渡时间 过渡方式  动画次数*/
			}
			/* 
			 CSS3基础语法:选择器：抓取页面上元素添加效果
			 ③伪类选择器：给元素添加附加效果
			 语法：选择器:hover 当鼠标悬停时给元素添加效果
			      选择器：before 在元素之前生成内容，通常content属性使用
			      选择器：after  在元素之后生成内容，通常content属性使用
			 
			 */
			/* 需求：心【四方块】上方生成内容*/
			div:before{
				content: "";
				/* CSS属性：显示属性
				 display:block;转换成块元素
				 display:inline;转换成行元素
				 display:none;元素消失
				 */
				display: block;
				/* 画圆 ：1.空间 2.边框/背景填充 3.倒角*/
			    width: 200px;
					height:200px;
					background-color: #e4393c;
					border-radius: 50%;
			    /* 相对定位 */
                position: relative;
			    left: -100px;
			}
			div:after{
				content: "";
				display:block ;
				width:200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				top: -100px;
			}
			/* 动画：1.创建关键帧 2.找到添加动画元素，启动关键帧*/
			@keyframes heart{
				0%{/*scale(1) 等比例 */
				/* 转换属性[复合属性]：旋转 缩放 平移 */
					transform:rotate(135deg) scale(1);
				}
				30%{/*scale(.8) 缩小 */
					transform:rotate(135deg) scale(.8);
				}
				100%{/*scale(1.2) 缩大 */
					transform:rotate(135deg) scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<!-- 心 思路：设置1个div  产生两个圆：伪类选择器
		    html      元素分类：所有元素明确种类
		              块元素：可以设置高宽、独占一行，典型div  
					  行元素：不可以设置高宽、在一行内显示，典型span
					  *文本就是行元素
					  行内块元素：可以设置宽高、在一行内显示，典型img
	    -->
		<div></div>
		<span>我今天</span><span>咋这么好看~</span>
	</body>
</html>